<template>
    <div>
        <Nav/>
        <div class="container">
            <mu-row gutter>
                <mu-col span="3">
                    <AdminNav/>
                </mu-col>
                <mu-col span="9" class="content">
                    <div class="title">二手车列表</div>
                    <div>
                        <mu-button color="primary" @click="show_from=!show_from">创建二手车</mu-button>
                    </div>

                    <div>
                        <form @submit.prevent="search">
                            <input v-model="keyword" type="search" placeholder="搜索标题和描述">
                            <button type="submit" hidden>搜</button>
                        </form>

                    </div>

                    <div v-if="show_from">
                        <form @submit="cou($event)">
                            <div class="input-control">
                                <label>标题</label>
                                <input type="text" v-model="current.title">
                            </div>
                            <div class="input-control">
                                <label>价格</label>
                                <input type="number" v-model="current.price">
                            </div>
                            <div class="input-control">
                                <label>卖车原因</label>
                                <input type="text" v-model="current.publish_reason">
                            </div>
                            <div class="input-control">
                                <label>当前里程</label>
                                <input type="number" v-model="current.consumed_distance">
                            </div>
                            <div class="input-control">
                                <label>过户次数</label>
                                <input type="number" v-model="current.exchange_times">
                            </div>
                            <div class="input-control">
                                <label>第一次上牌时间</label>
                                <input type="datetime-local" v-model="current.birthday">
                            </div>
                            <div class="input-control">
                                <label>预期出售时间</label>
                                <input type="datetime-local" v-model="current.deadline">
                            </div>
                            <div class="input-control">
                                <label>车况</label>
                                <input type="number" v-model="current.condition">
                            </div>
                            <div class="input-control">
                                <label>描述</label>
                                <textarea v-model="current.description"></textarea>
                            </div>
                            <div class="input-control">
                                <label class="dib">促销
                                    <input type="checkbox" v-model="current.on_sale">
                                </label>
                                <label class="dib">本地车牌
                                    <input type="checkbox" v-model="current.local">
                                </label>
                            </div>
                            <div class="input-control">
                                <button class="btn-primary" type="submit">提交</button>
                            </div>
                        </form>
                    </div>

                    <div class="table">
                        <table>
                            <thead>
                                <th>标题</th>
                                <th>价格</th>
                                <th>里程</th>
                                <th>预期出售时间</th>
                                <th>车况</th>
                                <th>过户次数</th>
                                <th>特价</th>
                                <th>操作</th>
                            </thead>
                            <tbody>
                                <tr v-for="row in list">
                                    <td>{{row.title}}</td>
                                    <td>{{row.price}}</td>
                                    <td>{{row.consumed_distance || '-'}}</td>
                                    <td>{{row.deadline || '-'}}</td>
                                    <td>{{row.condition ? row.condition + '成新' : '-'}}</td>
                                    <td>{{row.exchange_times || '-'}}</td>
                                    <td>{{row.on_sale || '-'}}</td>
                                    <td>
                                        <button @click="set_current(row)">编辑</button>
                                        <button @click="remove(row.id)">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <button></button>
                        </div>
                    </div>
                </mu-col>
            </mu-row>

        </div>
        <Footer/>
    </div>
</template>

<script>
    import Nav from '../../components/Nav.vue'
    import Footer from '../../components/Footer.vue'
    import AdminNav from '../../components/AdminNav.vue'
    import api from '../../lib/api.js'

    export default {
        components: {
            Nav,
            Footer,
            AdminNav
        },
        data() {
            return {
                list: [],
                current: {},
                show_from: false,
                keyword: '',
            }
        },
        mounted() {
            this.read();
        },
        methods: {
            cou(e) {
                e.preventDefault();
                let action = this.current.id ? 'update' : 'create';
                api(`vehicle/${action}`, this.current)
                    .then(r => {
                        this.current = "";
                        this.show_from = false;
                        this.read();
                    });
            },
            read() {
                api('vehicle/read')
                    .then(r => {
                        this.list = r.data;
                    });
            },
            remove(id) {
                api('vehicle/delete', { id: id })
                    .then(r => {
                        this.read();
                    });
            },
            set_current(row) {
                this.show_from = true;
                this.current = row;
            },
            search() {
                let kwd = this.keyword;

                let param = {
                    or: {
                        title: kwd,
                        description: kwd,
                    }
                }
                api('vehicle/search', param)
                    .then(r => {
                        this.list = r.data;
                    })
            }
        }
    }

</script>

<style scoped>
    .content {
        background-color: #f8f8f8;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .list-item {
        padding: 20px;
    }

    .right {
        text-align: right;
    }

    .title {
        text-align: center;
        margin-top: 10px;
        padding: 10px;
        font-weight: lighter;
        font-size: 25px;
    }

    .queren {
        margin-right: 10px;
    }

    .item {
        padding: 10px;
        width: 300px;
        margin: 0 auto;
    }

    .item input {
        width: 300px;
    }

    .main-form {
        text-align: center;
        margin-bottom: 30px;
    }

    .btns {
        margin-top: 10px;
    }

    table {
        font-weight: normal;
    }

    .table td {
        padding: 10px;
    }

    label {
        padding: 10px;
        display: block;
    }

    form {
        text-align: center;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    tr:hover {
        background-color: rgba(0, 300, 0, .1);

    }

    form label {
        text-align: left;
        margin-left: 30px;
    }

    [type=checkbox] {
        height: 20px;
        text-align: left;
    }

    input {
        width: 90%;
    }

    .btn-primary {
        width: 100px;
        border: 0;
    }
</style>